<template>
  <li class="cjy-page-body-commodity-li">
    <div>
      <div class="cjy-page-bod-commodity-box">
        <div class="cjy-page-image-box">
          <img v-lazy="comInfor.mainPic" class="cjy-page-image-box-img">
        </div>
        <div class="cjy-page-Info-box">
          <div class="cjy-page-title-box">
            <span style="width: 100%">{{goodsName || '\r'}}</span>
          </div>
          <div class="cjy-page-subtitle-box">
            <span style="width: 100%">{{subTitle || '\r'}}</span>
          </div>


          <div style="height: 0.8rem;width: 100%;"></div>


          <!--<div class="cjy-page-lable-box">-->
          <!--{{regularTypeLabel || '\r'}}-->
          <!--&lt;!&ndash;<span v-if="regularTypeLabel" class="cjy-lable"> {{regularTypeLabel}}</span>&ndash;&gt;-->
          <!--&lt;!&ndash;<span v-else> {{ '\r'}}</span>&ndash;&gt;-->
          <!--</div>-->
          <div class="cjy-page-price-box">
            ¥<span class="cjy-price">{{showWsPrice}}</span>
            <span class="cjy-price-unit" v-if="showUnit">/{{showUnit}}</span>
          </div>

          <div class="cjy-add-cart-button-box">
            <update-cart
              :addCartButtonType='5'
              ref="updateCart"
              pageName="cartforoffline"
              :commodityInfor="comInfor"
              :goodsId="goodsId">
            </update-cart>
          </div>


        </div>
      </div>
    </div>
  </li>
</template>

<script>
  import UpdateCart from '@/real-components/UpdateCart/CartForOffLine'
  import lazyLoad from 'vue-lazyload'
  import ButtonChangeCart from '@/real-components/ButtonChangeCart/icon'
  import minxinAuto from '../mixinAuto.vue'

  export default {
    data() {
      return {
        buttonType: 0
      }
    },
    mixins: [minxinAuto],
    components: {UpdateCart, ButtonChangeCart},
  }
</script>

<style scoped>
  .cjy-page-body-commodity-li {
    position: relative;
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.35rem;
    background: white;
  }

  .cjy-page-image-box {
    width: 28%;
    height: 0;
    position: relative;
    padding-bottom: 28%;
    overflow: hidden
  }

  .cjy-page-Info-box {
    width: 66.8%;
    padding-top: 0.6rem;
    position: relative;
    height: 100%;
  }

  .cjy-page-body-commodity-li > div {
    width: 100%;
    padding: 0.2rem;
    background: white;
    border-radius: 0.3rem;
    overflow: hidden;
  }

  .cjy-page-bod-commodity-box {
    width: 100%;
    position: relative;
    display: flex;
  }

  .cjy-page-title-box, .cjy-page-lable-box, .cjy-page-price-box, .cjy-page-lable-box, .cjy-page-subtitle-box {
    padding: 0 0 0 0.7rem;
    text-align: left;
  }

  .cjy-page-title-box {
    color: #BEBEBE;
    font-size: 0.8rem;
    line-height: 0.9rem;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
  }

  .cjy-page-subtitle-box {
    color: #444444;
    font-size: 0.7rem;
    line-height: 0.8rem;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
  }

  .cjy-page-lable-box {
    height: 1rem;
    font-size: 0.7rem;
    color: #FB4F5C;
  }

  .cjy-page-lable-box > .cjy-lable {
    display: inline-block;
    border: 1px solid #FB4F5C;
    font-size: 0.5rem;
    color: #FB4F5C;
    padding: 0px 0.2rem;
  }

  .cjy-page-price-box {
    position: relative;
    bottom: 0;
    width: 100%;
    margin-bottom: 0.2rem;
    font-size: 0.8rem;
    color: #444;
  }

  .cjy-page-price-box > .cjy-price {
    font-size: 1rem;
    font-weight: 400;
  }

  .cjy-page-price-box > .cjy-price-unit {
    color: black;
  }

  .cjy-button-box-go-detail {
    float: right;
    position: relative;
    background: #F9D59B;
    padding: 0 0.3rem;
    font-size: 0.7rem;
    font-weight: 400;
    height: 1rem;
    line-height: 1rem;
    color: #444;
    margin-top: 0.3rem;
  }

  .cjy-add-cart-button-box {
    height: 2.3rem;
    width: 2.5rem;
    padding: 0.5rem;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
  }
</style>
